@import '/src/styles/variables/mixins';

.search-input::-webkit-search-cancel-button {
  appearance: none;
}

.root {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.inputContainer {
  position: relative;
  display: flex;
  align-items: center;
}

.iconStart {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);

  display: grid;
  place-items: center;

  color: var(--color-dark-100);

  &:has(~ .input:focus) {
    color: var(--color-light-100);
  }
}

.iconEnd {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);

  display: grid;
  place-items: center;

  width: 20px;
  height: 20px;
}

.input {
  all: unset;

  cursor: auto;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  padding: 6px 40px 6px 12px;

  font-size: var(--font-size-m);
  line-height: var(--line-height-m);
  color: var(--color-light-100);

  border: 1px solid var(--color-dark-100);
  border-radius: 2px;
  outline: none;

  transition: 0.3s;

  &::placeholder {
    color: var(--color-dark-100);
  }

  &:disabled {
    color: var(--color-dark-300);
  }

  &:focus {
    outline: 1px solid var(--color-primary-500);
  }

  &:focus,
  &:active:enabled {
    outline: 1px solid var(--color-light-100);

    &::placeholder {
      color: var(--color-dark-100);
    }
  }

  &:hover:not(&:disabled) {
    background-color: var(--color-dark-500);
  }

  &.error {
    color: var(--color-danger-300);
    box-shadow: 0 0 0 1px var(--color-danger-300);

    &::placeholder {
      color: var(--color-danger-300);
    }
  }

  &[data-icon*='start'] {
    padding-left: 36px;
  }

  &[data-icon*='end'] {
    padding-right: 36px;
  }
}

.iconButton {
  all: unset;

  cursor: pointer;

  position: absolute;
  right: 10px;

  display: flex;

  border-radius: 100%;

  transition: 0.4s;

  &:hover {
    background-color: var(--color-light-700);
  }

  &.disabled {
    cursor: unset;
    color: var(--color-dark-300);
  }
}
